// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Item {
    id: route_page
    width: 450
    height: 760

    property int text_pixel_size: 22

    Column {
        id: column1
        anchors.topMargin: 15
        anchors.fill: parent
        spacing: 10

        Text {
            id: title
            x: 0
            y: -22
            text: "公交导航"
            font.pixelSize: 55
            color: "white"
        }

        Item {
            id: item_start
            x: 0
            y: 42
            width: 366
            height: 80

            MouseArea
            {
                anchors.fill: parent

                onClicked:
                {
                    loader_start.set_loader();
                }
            }

            Text {
                id: text1
                y: 34
                color: "#ffffff"
                text: "起点："
                anchors.left: parent.left
                anchors.leftMargin: 10
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: 44
            }

            Text {
                id: text_start
                x: 118
                y: 18
                color: "#ffffff"
                text: data_container.bus_start_text
                anchors.verticalCenterOffset: 0
                font.pixelSize: 26
                anchors.verticalCenter: parent.verticalCenter
                anchors.leftMargin: 20
                anchors.left: text1.right
                width: 240
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere

            }
        }

        Item {
            id: item_end
            x: 0
            y: 136
            width: 366
            height: 80

            MouseArea
            {
                anchors.fill: parent

                onClicked:
                {
                    loader_end.set_loader();
                }
            }

            Text {
                id: text2
                y: 34
                color: "#ffffff"
                text: "终点："
                font.pixelSize: 44
                anchors.verticalCenter: parent.verticalCenter
                anchors.leftMargin: 10
                anchors.left: parent.left
            }

            Text {
                id: text4
                x: -1
                y: 42
                color: "#ffffff"
                text: data_container.bus_end_text
                font.pixelSize: 26
                anchors.verticalCenter: parent.verticalCenter
                anchors.leftMargin: 20
                anchors.left: text2.right
                width: 240
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
            }
        }

        /////////////////////////////////////////////////      search_options and search button
        Row {
            id: row_search_and_options
            x: 0
            y: 228
            width: 366
            height: search_options_panel.height
            spacing: 5
            clip: true

            Item {
                id: search_options_panel
                height: 300
                width: parent.width / 2 + 10
//                anchors.top: search_rectangle.bottom
//                anchors.topMargin: 10
                clip: true
                state: "hide"

                property bool isShow: false
//                x: 0
//                y: 0
//                width: 200

                states: [
                    State {
                        name: "hide"
                        PropertyChanges {
                            target: search_options_panel
                            height: search_option_show.height
                        }

                        PropertyChanges {
                            target: search_options_column
                            opacity: 0
                        }
                    }
                ]

                Behavior on height {
                    PropertyAnimation { duration: 100; easing.type: Easing.OutQuad }
                }

                Mbutton {
                    id: search_option_show
                    pro_width: parent.width
                    pro_height: 70
                    textstring: "搜索选项"

                    onButtonclick:
                    {
                        if (!search_options_panel.isShow)
                        {
                            search_options_panel.state = "";
                            search_options_panel.isShow = true;
                        }
                        else
                        {
                            search_options_panel.state = "hide";
                            search_options_panel.isShow = false;
                        }
                    }
                }

                Column {
                    id: search_options_column
                    x: 0
                    y: 0
                    width: parent.width
                    height: 195
                    anchors.rightMargin: 0
                    anchors.leftMargin: 0
                    anchors.topMargin: 80
                    spacing: 20
                    anchors.bottomMargin: 0
                    anchors.fill: parent

                    Behavior on opacity {
                        PropertyAnimation { duration: 200; easing.type: Easing.OutQuad }
                    }

                    CheckBox {
                        id: checkbox_avoid_metro
                        x: 0
                        y: 54
                        textstring: "避开地铁"
                        isCheck: false

                        onCheck_statue:
                        {
//                            var lonlat =  positionSource.position.coordinate.longitude + "," + positionSource.position.coordinate.latitude ;
//                            checkbox_avoid_metro.isCheck = true;
//                            checkbox_less_time.isCheck = false;
//                            checkbox_less_transit.isCheck = false;
                            check == true ? data_container.bus_avoid = "1" : data_container.bus_avoid = "0" ;
//                            data_container.bus_avoid = "center:" + lonlat + ":1000:0";
//                            console.log("around me : " + search_option_detail);
                        }
                    }

                    CheckBox {
                        id: checkbox_less_time
                        x: 0
                        y: 150
                        textstring: "时间最少"
                        isCheck: true

                        onCheck_statue:
                        {
//                            web_view_map.evaluateJavaScript("getboundforqml()");
//                            checkbox_avoid_metro.isCheck = false;
                            checkbox_less_time.isCheck = true;
                            checkbox_less_transit.isCheck = false;
                            data_container.bus_tactic = "8";
//                            search_option_detail = "bound:" + js.mapbounds + ":0"
//                            console.log("current_map : " + search_option_detail);
                        }
                    }

                    CheckBox {
                        id: checkbox_less_transit
                        x: 0
                        y: 100
                        textstring: "换乘最少"
                        isCheck: false

                        onCheck_statue:
                        {
//                            search_option_detail = "city:全国";
//                            checkbox_avoid_metro.isCheck = false;
                            checkbox_less_time.isCheck = false;
                            checkbox_less_transit.isCheck = true;
                            data_container.bus_tactic = "2";
                        }
                    }

                    //            function options_changed()
                    //            {

                    //            }
                }

            }

            Mbutton {
                id: mbutton1
                x: 220
                y: 0
                textstring: "搜索"
                pro_width: parent.width / 2 - 10
                pro_height: 70

                onButtonclick:
                {
                    web_view_map.evaluateJavaScript("bus.route({'map':map,'destination':" + js.bus_end
                                                    + ",'origin':" + js.bus_start
                                                    + ",'avoid':" + data_container.bus_avoid
                                                    + ",'tactic':" + data_container.bus_tactic
                                                    + ",'maxResultCount':" + data_container.bus_maxResultCount
                                                    + "},buscallback);");
                    console.log("js.bus_start_end");
                    console.log(js.bus_start);
                    console.log(js.bus_end);
                    root.set_notification_loader(3000, "等待服务器响应中，响应时间取决于当前网络状况");
                }
            }
        }


        ListView {
            id: list_view_bus
            x: 0
            width: parent.width
            height: parent.height - title.height - item_start.height - item_end.height - row_search_and_options.height - 50
//            anchors.top: row_search_and_options.bottom
//            anchors.topMargin: 10
//            anchors.bottom: parent.bottom
//            anchors.bottomMargin: 0
            delegate: recipeDelegate
            model: data_container.get_route_model()
            clip: true
            boundsBehavior: Flickable.StopAtBounds
        }
    }

//    Component
//    {
//        id: list_view_bus_delegate

//        Item
//        {

//        }
//    }

    Component {
        id: recipeDelegate

        Item {
            id: recipe

            // Create a property to contain the visibility of the details.
            // We can bind multiple element's opacity to this one property,
            // rather than having a "PropertyChanges" line for each element we
            // want to fade.
            property real detailsOpacity : 0

            width: list_view_bus.width
            height: 100

            // A simple rounded rectangle for the background
            Rectangle {
                id: background
                x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
                color: "ivory"
                border.color: "orange"
                radius: 5
                opacity: 0
            }

            // This mouse region covers the entire delegate.
            // When clicked it changes mode to 'Details'.  If we are already
            // in Details mode, then no change will happen.
            MouseArea {
                anchors.fill: parent
                onClicked:
                {
                    recipe.state = 'Details';
                    route_page.state = "bus_detail";
                }
            }

            // Lay out the page: picture, title and ingredients at the top, and method at the
            // bottom.  Note that elements that should not be visible in the list
            // mode have their opacity set to recipe.detailsOpacity.
            Row {
                id: topLayout
                x: 0; y: 10; height: 85; width: parent.width
                spacing: 0

//                Image {
//                    id: recipeImage
//                    width: 0/*50*/; height: 50
//                    source: ""
//                }

                Column {
                    width: background.width /*- recipeImage.width*/ - 0; height: parent.height
                    spacing: 3

                    Text {
                        text: "预计路途时间：" + bus_time + "分钟"
                        wrapMode: Text.WrapAnywhere
                        width: parent.width
                        font.bold: true; font.pixelSize: text_pixel_size + 11
                        color: "white"
                    }

                    //                            Text {
                    //                                text: "Ingredients"
                    //                                font.pointSize: 12; font.bold: true
                    //                                opacity: recipe.detailsOpacity
                    //                            }

                    Text {
                        x: 100
                        text: "换乘次数：" + ( bus_line_num - 1 )
                        wrapMode: Text.WordWrap
                        width: parent.width
                        font.pixelSize: text_pixel_size  + 11
                        color: "white"
//                        opacity: recipe.detailsOpacity
                    }

                    Rectangle
                    {
                        color: "white"
                        width: parent.width
                        height: 1
                    }

//                    Text {
//                        text: points
//                        wrapMode: Text.WordWrap
//                        width: parent.width
//                        font.pixelSize: text_pixel_size
//                        opacity: recipe.detailsOpacity
//                    }
                }
            }
            // important!!
            Item {
                id: details
                x: 10; width: parent.width - 20
                anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 }
                opacity: recipe.detailsOpacity

                // add buttons here
                Column
                {
                    anchors.fill: parent
                    anchors.topMargin: 20
                    spacing: 20

                    Text {
                        id: text_route
                        text: "乘坐路线： " + bus_line_names
                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                        width: parent.width
                        font.pixelSize: text_pixel_size + 5
                        color: "white"
                    }

//                    Text {
//                        id: text_category
//                        text: "category : " + category
//                        font.pixelSize: text_pixel_size
//                    }
                    Row
                    {
                        spacing: 50
                        Mbutton
                        {
                            id: bn_routedetail
                            pro_width: 150
                            pro_height: 50
                            textstring: "详细路线"
                            text_size: text_pixel_size

                            onButtonclick:
                            {
                                //                            loader_use_as.source = "LocationUseAs.qml";
                                //                            loader_use_as.item.set_location(address, points);
                                web_view_map.evaluateJavaScript("getSchemeDetail(" + index + ")");
                                root.set_bus_navi_loader();
                                root.switch_map_panel();
//                                bottom_menu.switch_state();
                                root.set_notification_loader(3000, "等待服务器响应中，响应时间取决于当前网络状况");
                            }
                        }

                        Mbutton {
                            y: bn_routedetail.y
                            pro_width: 150
                            pro_height: 50
//                            anchors { right: background.right; rightMargin: 10;}
                            opacity: recipe.detailsOpacity
                            textstring: "返回"
                            text_size: text_pixel_size

                            onButtonclick:
                            {
                                recipe.state = '';
                                route_page.state = "";
                            }
                        }
                    }

//                    Mbutton
//                    {
//                        width: 150
//                        height: 50
//                        textstring: "×÷ÖŐµă"

//                        onButtonclick:
//                        {
////                            web_view_map.end = title;
////                            mainApp.useInfobox("ÖŐµăŁş" + web_view_map.end);
//                        }
//                    }

//                    Mbutton
//                    {
//                        width: 150
//                        height: 50
//                        textstring: "ż´µŘÍĽ"

//                        onButtonclick:
//                        {
////                            web_view_map.setsearchresult_poi(poi);
////                            web_view_map.state === 'state1' ? web_view_map.state = "" : web_view_map.state = 'state1' ;
////                            inputpanel.state === 'state1' ? inputpanel.state = "" : inputpanel.state = 'state1' ;
//                        }
//                    }
                }
                //                        Text {
                //                            id: methodTitle
                //                            anchors.top: parent.top
                //                            text: "Method"
                //                            font.pointSize: 12; font.bold: true
                //                        }

                //                        Flickable {
                //                            id: flick
                //                            width: parent.width
                //                            anchors { top: methodTitle.bottom; bottom: parent.bottom }
                //                            contentHeight: methodText.height
                //                            clip: true

                //                            Text { id: methodText; text: method; wrapMode: Text.WordWrap; width: details.width }
                //                        }

                //                        Image {
                //                            anchors { right: flick.right; top: flick.top }
                //                            source: "content/pics/moreUp.png"
                //                            opacity: flick.atYBeginning ? 0 : 1
                //                        }

                //                        Image {
                //                            anchors { right: flick.right; bottom: flick.bottom }
                //                            source: "content/pics/moreDown.png"
                //                            opacity: flick.atYEnd ? 0 : 1
                //                        }
            }

            // A button to close the detailed view, i.e. set the state back to default ('').
//            Mbutton {
//                y: bn_routedetail.y
//                pro_width: 150
//                pro_height: 50
//                anchors { right: background.right; rightMargin: 10;}
//                opacity: recipe.detailsOpacity
//                textstring: "返回"
//                text_size: text_pixel_size

//                onButtonclick: recipe.state = '';
//            }

            states: State {
                name: "Details"

                PropertyChanges { target: background; color: "white" }
//                PropertyChanges { target: recipeImage; width: 130; height: 130 } // Make picture bigger
                PropertyChanges { target: recipe; detailsOpacity: 1; x: 0 } // Make details visible
                PropertyChanges { target: recipe; explicit: true; height: list_view_bus.height + 240 } // Fill the entire list area with the detailed view

                // Move the list so that this item is at the top.
                PropertyChanges { target: recipe.ListView.view; explicit: true; contentY: recipe.y }

                // Disallow flicking while we're in detailed view
                PropertyChanges { target: recipe.ListView.view; interactive: false }
            }

            transitions: Transition {
                // Make the state changes smooth
                ParallelAnimation {
                    ColorAnimation { property: "color"; duration: 500 }
                    NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
                }
            }
        }
    }


    ListModel
    {
        id: list_view_bus_model
    }

    ///////////////////////////////////////
    Loader
    {
        id: loader_start
        anchors.fill: parent
        source: ""

        function set_loader()
        {
            loader_end.source = "";
            loader_start.source = "RouteLocationFrom.qml";
        }
    }

    Connections
    {
        id: con_start
        target: loader_start.item

        onUseMyLocation:
        {
            data_container.bus_start_text = "自己位置";
            //data_container.bus_start_lonlat = "new sogou.maps.LatLng(" + positionSource.position.coordinate.latitude + "," + positionSource.position.coordinate.longitude + ")";
            var lonlat_str = "new sogou.maps.LatLng(" + positionSource.position.coordinate.latitude + "," + positionSource.position.coordinate.longitude + ")"
            web_view_map.eva_js("window.qml.start_poi = convertor.toSogou(" + lonlat_str + ").toString()");
            loader_start.source = "";
        }

        onUseMapCenter:
        {
            data_container.bus_start_text = "自定义位置";
            data_container.bus_start_lonlat = "new sogou.maps.Point(" + js.mapcenter + ")" ;
            loader_start.source = "";
        }

        onCancel:
        {
            loader_start.source = "";
        }
    }

    ///////////////////////////////////////
    Loader
    {
        id: loader_end
        x: -30
        y: 0
        height: 854
        width: 480
//        anchors.fill: parent
        source: ""

        function set_loader()
        {
            loader_start.source = "";
            loader_end.source = "RouteLocationFrom.qml";
        }
    }

    Connections
    {
        id: con_end
        target: loader_end.item

        onUseMyLocation:
        {
            data_container.bus_end_text = "自己位置";
//            data_container.bus_end_lonlat = "new sogou.maps.LatLng(" + positionSource.position.coordinate.latitude + "," + positionSource.position.coordinate.longitude + ")";
            var lonlat_str = "new sogou.maps.LatLng(" + positionSource.position.coordinate.latitude + "," + positionSource.position.coordinate.longitude + ")"
            web_view_map.eva_js("window.qml.end_poi = convertor.toSogou(" + lonlat_str + ").toString()");
            loader_end.source = "";
        }

        onUseMapCenter:
        {
            data_container.bus_end_text = "自定义位置";
            data_container.bus_end_lonlat = "new sogou.maps.Point(" + js.mapcenter + ")" ;
            loader_end.source = "";
        }

        onCancel:
        {
            loader_end.source = "";
        }
    }

    states: [
        State {
            name: "bus_detail"

            PropertyChanges {
                target: item_start
                height: 0
                opacity: 0
            }

            PropertyChanges {
                target: item_end
                height: 0
                opacity: 0
            }

            PropertyChanges {
                target: row_search_and_options
                height: 0
            }
        }
    ]

    transitions: Transition {
        // Make the state changes smooth
        ParallelAnimation {
            NumberAnimation { duration: 100; properties: "opacity,height" }
        }
    }
}
